{template 'common/header'}<style>
    .header-box{
        position: absolute;
        width: 100%;
        top: 0;
        height: 25%;
    }
    #main-box{
        position: absolute;
        width: 100%;
        top: 25%;
        height: 75% !important;
        overflow: auto;
        overflow-x: hidden;
    }
    #info-bar{
        position: absolute;
        width: 100%;
        bottom: 0;
    }

</style>

<title>{$levelText}</title>


<div class="xhq_body body_bg6">
    <div id="container" style="height:100%;">

    </div>
</div>

<script id='tpl_header' type='text/html'>

    <div class="header-box ">
        <div class="container-fluid vip-info-bg" id="info-box">
            <div class="user-head-pic pull-left margin-sm">
                <img src="<%member.avatar%>" alt="" class="img-responsive img-circle">
            </div>
            <div class="container-fluid pull-left margin-sm">
                <ul class="list-unstyled vip-info-list">
                    <li><h6 class="pull-left">昵称：</h6><h6 class="pull-left"><%member.nickname%></h6></li>
                    <li><h6 class="pull-left">花名：</h6><h6 class="pull-left"><%member.commission.levelname%></h6></li>
                    <li><h6 class="pull-left">编号：</h6><h6 class="pull-left"><%member.id%></h6></li>
                </ul>
            </div>
        </div>

        <div class="container-fluid amount_detail_banner" id="info-bar">
            <div class="row">
                <div class="col-xs-12 pull-left">
                    <div class="row border-right">
                        <h5 class="text-center white_font">{$title} / 共：<%member.levelCount%> 人</h5>
                    </div>
                </div>
            </div>
        </div>

    </div>

</script>

<script id='tpl_content' type="text/html">
    <div id="main-box" style="height:100%;">
        <div class="container-fluid margin-sm">
            <div class="row">

                <%if teams != ''%>
                <div class="col-xs-12">
                    <ul class="list-group vip-list-box">
                        <%each teams as team%>
                        <li class="list-group-item">
                            <div class="vip-head-pic">
                                <img src="<%team.avatar%>" class="img-responsive" alt="">
                            </div>
                            <div class="vip-info">
                                <span class="vip-name" style="font-size:16px;"><%team.nickname%></span>
                                <span class="vip-time"><%team.agenttime%></span>
                            </div>

                            {if $_GPC['level'] <= 4}
                            <div class="vip-info-price">
                                <span class="vip-price">+<%team.commission_total%>元</span>
                                <span class="vip-num"><%team.agentcount%>个代理人</span>
                            </div>
                            {/if}
                        </li>
                        <%/each%>
                    </ul>
                </div>
                <%else%>
                <div class="col-xs-12 text-center" style="height: 150px; line-height: 150px;">
                    <span>您还没有 <%member.levelText%> ，快去推荐给好友吧。</span>
                </div>
                <%/if%>

            </div>
        </div>
    </div>
</script>

<script type="text/html" id="tpl_lists">
    <%each teams as team%>
    <li class="list-group-item">
        <div class="vip-head-pic">
            <img src="<%team.avatar%>" class="img-responsive" alt="">
        </div>
        <div class="vip-info">
            <span class="vip-name" style="font-size:16px;"><%team.nickname%></span>
            <span class="vip-time"><%team.agenttime%></span>
        </div>

        {if $_GPC['level'] <= 3}
        <div class="vip-info-price">
            <span class="vip-price">+<%team.commission_total%>元</span>
            <span class="vip-num"><%team.agentcount%>个代理人</span>
        </div>
        {/if}
    </li>
    <%/each%>
</script>

<script type="text/javascript">

    require(['tpl', 'core'], function (tpl, core) {

        var level = "{$_GPC['level']}";
        var page  = 1;

        function bindScroller(){
            //加载更多
            var loaded = false;
            var stop = true;

            $('#main-box').scroll(function () {

                if (loaded) {
                    return;
                }

                totalheight = parseFloat($('#main-box').height()) + parseFloat($('#main-box').scrollTop());

                if ($('.list-group').height()+40 <= totalheight) {
                    if (stop == true) {
                        stop = false;
                        page++;

                        core.json('member/myVip',  {level: level, page: page}, function (morejson) {
                            stop = true;
                            $("#main-box ul").append(tpl('tpl_lists', morejson.result));

                            if (morejson.result.teams.length < morejson.result.pagesize) {
                                loaded = true;
                                $('#main-box').scroll = null;
                                core.tip.show('已完成全部加载');
                                return '';
                            }
                        }, true);
                    }
                }

            });
        }

        function getTeams(level) {
            core.json('member/myVip', {level: level, page: page}, function (json) {

                if(json.status == 1){
                    $("#container").append(tpl('tpl_header', json.result));
                    $("#container").append(tpl('tpl_content', json.result));

                    bindScroller();
                }

            }, true);
        }

        getTeams(level);

    });

</script>

{php $show_footer=true}
{template 'common/footer'}
